import React, { FC, useEffect } from "react";
import { PlusOutlined, MinusCircleOutlined } from "@ant-design/icons";
import { Form, Checkbox, Input, Select, Button, Space } from "antd";
import { nanoid } from "nanoid";
import { QuestionCheckboxPropsType, QuestionDefaultCheckbox, OptionType } from "./interface";

const PropComponent: FC<QuestionCheckboxPropsType> = (props: QuestionCheckboxPropsType) => {
  const { title, isVertical, list, onChange, disabled } = props;
  const [form] = Form.useForm();

  useEffect(() => {
    form.setFieldsValue({ title, isVertical, list });
  }, [title, isVertical, list]);

  function handleValuesChange() {
    if (onChange == null) return;
    //触发onChange 函数
    const newValues = form.getFieldsValue() as QuestionCheckboxPropsType;
    const { list = [] } = newValues;

    list.forEach((opt) => {
      if (opt.value) return;
      opt.value = nanoid(5); //补齐optvalue
    });
    onChange(newValues);
  }

  return (
    <Form
      form={form}
      layout="vertical"
      initialValues={{ title, isVertical, list }}
      disabled={disabled}
      onValuesChange={handleValuesChange}>
      <Form.Item label="标题" name="title" rules={[{ required: true, message: "请输入标题" }]}>
        <Input></Input>
      </Form.Item>

      {/* 选项 */}
      <Form.Item label="选项">
        <Form.List name="list">
          {(fields, { add, remove }) => (
            <>
              {/* 遍历所有选项可删除 */}
              {fields.map(({ key, name }, index) => {
                return (
                  <Space key={key} align="baseline">
                    {/* 当前选项是否选中 */}
                    <Form.Item name={[name, "checked"]} valuePropName="checked">
                      <Checkbox></Checkbox>
                    </Form.Item>

                    {/* 当前选项输入框 */}
                    <Form.Item
                      name={[name, "text"]}
                      rules={[
                        { required: true, message: "请输入选项文字" },
                        {
                          validator: (_, text) => {
                            const { list = [] } = form.getFieldsValue();
                            let num = 0;
                            list.forEach((opt: OptionType) => {
                              if (opt.text == text) num++; //记录text相同的个数预期只有一个
                            });
                            if (num === 1) return Promise.resolve();
                            return Promise.reject(new Error("选项文字不能重复"));
                          },
                        },
                      ]}>
                      <Input placeholder="输入选项文字" />
                    </Form.Item>
                    {/* 当前选项输出按钮 */}
                    {index > 0 && <MinusCircleOutlined onClick={() => remove(name)} />}
                  </Space>
                );
              })}

              {/* //添加选项 */}
              <Form.Item>
                <Button
                  block
                  icon={<PlusOutlined></PlusOutlined>}
                  type="link"
                  onClick={() => add({ text: "", value: "", checked: false })}>
                  添加选项
                </Button>
              </Form.Item>
            </>
          )}
        </Form.List>
      </Form.Item>

      <Form.Item name="isVertical" valuePropName="checked">
        <Checkbox>数列排序</Checkbox>
      </Form.Item>
    </Form>
  );
};
export default PropComponent;
